<template>
	<view class="integral-page">
		
		<!-- 积分背景区域 -->
		<view class="integral-header">
			<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="nav-back" @click="goBack">
				<wd-icon name="arrow-left" size="20px" color="#ffffff"></wd-icon>
			</view>
			<text class="nav-title">我的积分</text>
		</view>
			<image class="bg-image" src="/pagesA/static/integral_bg.png" mode=""></image>
			<view class="integral-content">
				<view class="integral-number">{{ userPoints }}</view>
				<view class="integral-actions">
					<view class="action-btn" @click="goToTransfer">
						<text>转赠积分</text>
						<wd-icon name="heart" size="16px" color="#ffffff"></wd-icon>
					</view>
					<view class="action-btn" @click="goToExchange">
						<text>积分兑换</text>
						<wd-icon name="shop" size="16px" color="#ffffff"></wd-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 积分记录 -->
		<view class="integral-records">
			<view class="records-header">
				<!-- <text class="records-title">积分记录</text> -->
				<!-- <view class="records-filter" >
					<wd-datetime-picker type="year-month" v-model="value"  @confirm="handleConfirm" />
				</view> -->
				<wd-datetime-picker  v-model="value" type="year-month" @confirm="handleConfirm">
					<view class="records-filter">
						<text>{{changeTime}}</text>
					    <wd-icon name="arrow-down" size="12px" color="#999"></wd-icon>
					</view>
				</wd-datetime-picker>
				<view class="records-filter" @click="showFilterModal">
					<text>{{selectedFilterLabel}}</text>
					<wd-icon name="arrow-down" size="12px" color="#999"></wd-icon>
				</view>
			</view>
			
			<view class="records-list">
				<view 
					v-for="(record, index) in dataList" 
					:key="index" 
					class="record-item"
				>
					<view class="record-left">
						<text class="record-title">{{ record.categoryName }}</text>
						<text class="record-date">{{ record.optTime }}</text>
					</view>
					<view class="record-right">
						<text 
							class="record-amount" 
							:class="{ 'positive': record.type == 1, 'negative': record.type == -1 }"
						>
							{{ record.type == 1  ? '+' : '' }}{{ record.integral }}
						</text>
					</view>
				</view>
				 <!-- 暂无内容 -->
				 <wd-status-tip v-if="dataList?.length == 0" image="/static/viewNull.png"  :image-size="{ height: 50,  width: 50}" tip="暂无内容" />
			</view>
		</view>
		
		<!-- 筛选弹窗 -->
		<wd-popup v-model="showFilter" position="bottom" :safe-area-inset-bottom="true">
			<view class="filter-popup">
				<view class="filter-header">
					<text class="filter-title">筛选条件</text>
					<wd-icon name="close" size="20px" @click="showFilter = false"></wd-icon>
				</view>
				<view class="filter-options">
					<view 
						v-for="(option, index) in filterOptions" 
						:key="index"
						class="filter-option"
						:class="{ 'active': selectedFilter === option.value }"
						@click="selectFilter(option)"
					>
						<text>{{ option.label }}</text>
					</view>
				</view>
			</view>
		</wd-popup>
	</view>
	<!-- loading加载 -->
	<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
</template>

<script setup>
	import {useUserStore,} from '@/store/user';
	import { storeToRefs } from 'pinia'
	const userStore = useUserStore();
	const { userInfo } = storeToRefs(userStore);
	// 响应式数据
	const userIntegral = ref(1078)
	const showFilter = ref(false)
	const selectedFilter = ref(1)
	const selectedFilterLabel = ref('收入')
	const total = ref(0);//分页总条数
	const pageNo = ref(0);//分页当前页码 从0开始
	const loadActive = ref(false);
	const loadmoreState = ref('loading');
	const userPoints = ref(0) // 用户积分余额
	const value = ref(Date.now())
	const changeTime = ref(uni.$uv.timeFormat(Date.now(),'yyyy-mm'));
	// 筛选选项
	const filterOptions = ref([
		{ label: '收入', value: 1 },
		{ label: '支出', value:-1 }
	])
	
	// 积分记录数据
	const dataList = ref([
		{
			title: '本月',
			date: '',
			amount: -541,
			type: 'summary'
		},
		{
			title: '开会员',
			date: '2020-02-28',
			amount: 10,
			type: 'income'
		},
		{
			title: '5月份奖励',
			date: '',
			amount: 500,
			type: 'income'
		},
		{
			title: '支付',
			date: '',
			amount: 12,
			type: 'income'
		},
		{
			title: '门店消费',
			date: '',
			amount: 500,
			type: 'income'
		},
		{
			title: '转赠支出',
			date: '',
			amount: -200,
			type: 'expense'
		}
	])
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
	
	// 跳转到积分转赠页面
	const goToTransfer = () => {
		uni.navigateTo({
			url: '/pagesA/view/integral/transfer'
		})
	}
	//时间选择器确认
	const handleConfirm = (e) => {
		changeTime.value = uni.$uv.timeFormat(e.value,'yyyy-mm');
		getPage(true);
	}

	// 跳转到积分兑换页面
	const goToExchange = () => {
		uni.showToast({
			title: '敬请期待',
			icon: 'none'
		})
	}
	
	// 显示筛选弹窗
	const showFilterModal = () => {
		showFilter.value = true;
	}
	
	// 选择筛选条件
	const selectFilter = (opt) => {
		selectedFilter.value = opt.value;
		selectedFilterLabel.value = opt.label;
		showFilter.value = false;
		getPage();
	}
	/**
	 * 获取订单数据
	 */
	const getPage = async () => {
		const res = await uni.api.integralList({
			pageNo: pageNo.value,
			type:selectedFilter.value,
			queryMonth: changeTime.value,
			userId: userInfo.value.id
		})
		if (res.code === 0 && res.data) {
			dataList.value = res.data;
		}
		loadActive.value = false
	}
	//获取积分
	const myIntegral = async () => {
		const res = await uni.api.myIntegral();
		if(res.code==0){
			userPoints.value = res.data?.surplusIntegral || 0;
		}
	}
	// 页面加载
	onShow(() => {
		getPage();
		myIntegral();
	})
</script>

<style lang="scss">
	.integral-page {
		min-height: 100vh;
		background: #f5f5f5;
	}
	
	.integral-header {
		position: relative;
		height: 551rpx;
		overflow: hidden;
		
		.nav-bar {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: calc(var(--status-bar-height) + 112rpx);
			width: 100%;
			display: flex;
			align-items: flex-end;
			padding: 0 32rpx 16rpx;
			z-index: 10;
			
			.nav-back {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 64rpx;
				height: 64rpx;
				border-radius: 32rpx;
				background: rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(10px);
			}
			
			.nav-title {
				position: absolute;
				left: 50%;
				bottom: 16rpx;
				transform: translateX(-50%);
				color: #ffffff;
				font-size: 36rpx;
				font-weight: 500;
			}
		}
		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		
		.integral-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			color: #ffffff;
			z-index: 2;
			
			.integral-number {
				color: #ffffff;
				font-size: 80rpx;
				font-weight: bold;
				margin-bottom: 60rpx;
				text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
			}
			
			.integral-actions {
				display: flex;
				gap: 80rpx;
				justify-content: center;
				
				.action-btn {
					display: flex;
					align-items: center;
					padding:8rpx 20rpx;
					background: rgba(255, 255, 255, 0.2);
					backdrop-filter: blur(10px);
					border-radius: 50rpx;
					width: 160rpx;
					text {
						color: #ffffff;
						font-size: 28rpx;
						padding-right: 6rpx;
					}
				}
			}
		}
	}
	
	.integral-records {
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx 32rpx;
		
		.records-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			
			.records-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
			
			.records-filter {
				display: flex;
				align-items: center;
				gap: 8rpx;
				// padding: 12rpx 24rpx;
				// background: #f8f8f8;
				
				text {
					font-size: 28rpx;
					color: #666;
				}
			}
		}
		
		.records-list {
			.record-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;
				border-bottom: 1px solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				.record-left {
					.record-title {
						display: block;
						font-size: 32rpx;
						color: #333;
						margin-bottom: 8rpx;
					}
					
					.record-date {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.record-right {
					.record-amount {
						font-size: 32rpx;
						font-weight: bold;
						
						&.positive {
							color: #52c41a;
						}
						
						&.negative {
							color: #ff4d4f;
						}
					}
				}
			}
		}
	}
	
	.filter-popup {
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx 32rpx;
		
		.filter-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			
			.filter-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.filter-options {
			.filter-option {
				padding: 32rpx 0;
				border-bottom: 1px solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				&.active {
					color: #667eea;
				}
				
				text {
					font-size: 32rpx;
				}
			}
		}
	}
</style>